{% from 'bootstrap4/form.html' import render_form %}
{% block head %}

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/profile.css') }}">

{% endblock %}

<div class="container emp-profile">
    <form method="post">
        <div class="row">
            <div class="col-md-4">
                <div class="profile-img">
                    <img class="rounded" src="{{ url_for('static', filename='images/girl.jpg') }}" width="80">                            
                     
                </div>
            </div>
            <div class="col-md-12">
                <div class="profile-head">
                            <h5>
                                {{ current_user.username }}
                            </h5>
                            <h6>
                                {{ user.email }}
                            </h6>
                            <h6>
                                {{ user.location }}
                            </h6>
                            <h6>
                                {{ user.about_me }}
                            </h6>
                            <p>
                                Member since {{ moment(user.member_since).format('L') }}.
                                Last seen {{ moment(user.last_seen).fromNow() }}.
                            </p> 
                            {% if current_user.can(Permission.FOLLOW) and user != current_user %}
                            {% if not current_user.is_following(user) %}
                            <a href="{{ url_for('main.follow', username=user.username) }}"
                             class="btn btn-primary">Follow</a>
                            {% else %}
                            <a href="{{ url_for('main.unfollow', username=user.username) }}"
                            class="btn btn-default">Unfollow</a>
                            {% endif %}
                            {% endif %}
                            <a href="{{ url_for('main.followers', username=user.username) }}">
                            Followers: <span class="badge">{{ user.followers.count() }}</span>
                            </a>
                            <a href="{{ url_for('main.followed_by', username=user.username) }}">
                             Following: <span class="badge">{{ user.followed.count() }}</span>
                            </a>
                            {% if current_user.is_authenticated and user != current_user and
                             user.is_following(current_user) %}
                          | <span class="label label-default">Follows you</span>
                             {% endif %}
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Comments</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="profile-work">
                    <p>HELP LIST</p>
                        <a href="{{ url_for('auth.change_email_request') }}">Change Email</a><br/>
                        <a href="{{ url_for('main.edit_profile') }}">Edit Profile</a><br/>
                        <a href="{{ url_for('auth.change_password') }}">Change Password</a>
                        <p>Another</p> 
                        {% if user == current_user %}                                
                         <a class="btn btn-primary" href="{{ url_for('.edit_profile') }}">Edit Profile</a>
                         {% endif %}
           
                        {% if current_user.is_administrator() %}
                        <a class="btn btn-danger" href="{{ url_for('.edit_profile_admin', id=user.id) }}">Edit Profile[Admin]</a>
                        {% endif %}
                </div>
            </div>
            <div class="col-md-8">
                <div class="tab-content profile-tab" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Name</label>
                                    </div>
                                    <div class="col-md-6">
                                        <p>{{ user.name }}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Email</label>
                                    </div>
                                    <div class="col-md-6">
                                        <p>{{ user.email }}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Location</label>
                                    </div>
                                    <div class="col-md-6">
                                        <p>{{ user.location }} </p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>About Me</label>
                                    </div>
                                    <div class="col-md-6">
                                        <p>{{ user.about_me }}</p>
                                    </div>
                                </div>
                    </div>    
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">

    {% for post in posts %}

    <div class="container mt-5">
        <div class="d-flex justify-content-center row">
            <div class="col-md-12">
                <div class="d-flex flex-column comment-section">
                    <div class="bg-white p-2">
                        <div class="d-flex flex-row user-info"><img class="rounded-circle"
                                src="{{ url_for('static', filename='images/girl.jpg') }}" width="80">
                            <div class="d-flex flex-column justify-content-start ml-2">
                                <span class="font-weight-bold title">标题：{{ post.title }}</span>
                                <span class="d-block font-weight-bold name">
                                    <a href="{{ url_for('.user', username=post.author.username) }}">
                                        {{ post.author.username }}
                                    </a>
                                </span>
                                <span class="date text-black-50">{{ moment(post.timestamp).fromNow() }}</span>
                            </div>
                        </div>
                        <div class="mt-2">
                            <p class="comment-text">
                                {% if post.body_html %}
                                {{ post.body_html | safe }}
                                {% else %}
                                {{ post.body }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <div class="col d-flex justify-content-end">
                        <!-- <i class="fa fa-tags" aria-hidden="true"></i> -->
                        <a href="{{ url_for('main.post', id=post.id) }}">
                            <span class="badge badge-success mr-2">链接</span>
                        </a>
                        {% if current_user == post.author %}
                        <a href="{{ url_for('main.edit', id=post.id) }}">
                            <span class="badge badge-primary mr-2">编辑</span>
                        </a>
                        {% elif current_user.is_administrator() %}
                        <a href="{{ url_for('main.edit', id=post.id) }}">
                            <span class="badge badge--danger">编辑[管理员]</span>
                        </a>
                        {% endif %}

                        {% if current_user == post.author %}
                        <a href="{{ url_for('main.remove_post', id=post.id) }}">
                            <span class="badge badge-danger mr-2">删除</span>
                        </a>
                        {% elif current_user.is_administrator() %}
                        <a href="{{ url_for('main.remove_post', id=post.id) }}">
                            <span class="badge badge-danger mr-2">删除[管理员]</span>
                        </a>
                        {% endif %}

                        <a href="{{ url_for('main.post', id=post.id) }}#comments">
                            <span class="badge badge-primary mr-2">
                                {{ post.comments.count() }} Comments
                            </span>
                        </a>
                    </div>
                    <div class="bg-white">
                        <div class="d-flex flex-row fs-12">
                            <div class="like p-2 cursor"><i class="fas fa-thumbs-up"></i><span class="ml-1">点赞</span>
                            </div>
                            <div class="like p-2 cursor"><i class="far fa-comment-dots"></i><span class="ml-1">评论</span>
                            </div>
                            <div class="like p-2 cursor"><i class="fa fa-share"></i><span class="ml-1">分享</span></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {% if show_comments %}
    <div class="bg-light p-2">
        <form method="POST" class="form" role="form">
            {{ form.hidden_tag() }}
            <div class="d-flex flex-row align-items-start">
                <img class="rounded-circle" src="{{ url_for('static', filename='images/girl.jpg') }}" width="40">
                <!-- <textarea class="form-control ml-1 shadow-none textarea" id='body' name="body"  required></textarea> -->
                {{ form.body(class="form-control ml-1 shadow-none textarea", id="body") }}
            </div>
            <div class="mt-2 text-right">
                <!-- <button class="btn btn-primary btn-sm shadow-none" id='submit' name='submit' type="button">评论</button> -->
                {{ form.submit(class="btn btn-primary btn-sm shadow-none",id='submit') }}
                <button class="btn btn-outline-primary btn-sm ml-1 shadow-none" type="button">删除评论</button>
            </div>
        </form>
    </div>
    {{ render_form(form) }}
    {% for comment in post.comments %}
    <div class="mt-2">
        <p class="comment-text">
            {% if comment.body_html %}
            {{ comment.body_html | safe }}
            {% else %}
            {{ comment.body }}
            {% endif %}
        </p>
        <div class="card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div class="user d-flex flex-row align-items-center">
                    <img src="https://i.imgur.com/hczKIze.jpg" width="30" class="user-img rounded-circle mr-2">
                    <span>
                        <small class="font-weight-bold text-primary">{{ comment.author.username }}</small>
                        <p><small class="font-weight-bold">
                            {% if comment.body_html %}
                                {{ comment.body_html | safe }}
                            {% else %}
                                {{ comment.body }}
                            {% endif %}
                        </small>
                        </p>
                    </span>
                </div>
                <small>{{ moment(post.timestamp).fromNow() }}</small>
            </div>
            <div class="col d-flex justify-content-end">
                <i class="fa fa-tags" aria-hidden="true"></i>
                {% if current_user == post.author %}
                <a href="{{ url_for('main.remove_post', id=post.id) }}">
                    <span class="badge badge-danger mr-2">删除</span>
                </a>
                {% elif current_user.is_administrator() %}
                <a href="{{ url_for('main.remove_post', id=post.id) }}">
                    <span class="badge badge-danger mr-2">删除[管理员]</span>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}
    {% endfor %}
</div>
</div>
</div>
</div>
</form>
</div>
